  <template>
   <!-- 测试打印数据 添加设备信息弹窗 - Vue3 改造版 测试打印数据 -->
   <el-dialog 
     :model-value="visible" 
     @update:model-value="handleUpdateVisible"
     title="添加设备信息" 
     width="90%" 
     class="device-edit-dialog"
     :before-close="handleClose"
   >
    <div class="device-form-container" v-if="formdata.obj">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-wrapper">
        <el-skeleton :rows="6" animated />
      </div>

      <!-- 表单内容 -->
      <el-form v-else ref="formRef" :model="formdata.obj" label-position="top" class="device-form">
        <el-form-item
          v-for="(item, index) in formdata.zdlist"
          :key="index"
          :label="item.edit == 0 ? item.cn_name + '：' + nullFun(formdata.obj[item.en_name]) : item.cn_name"
          :required="item.bitian == 1"
          v-show="!hidezdlist.includes(item.en_name)"
          @click="xzCanShu(item, undefined, index)"
        >
          <!-- 只读显示字段 -->
          <div v-if="item.edit == 0" class="readonly-field">
            {{ formdata.obj[item.en_name] }}
          </div>

          <!-- 日期时间选择器 -->
          <el-date-picker
            v-else-if="item.ctype == '选择日期时间'"
            v-model="formdata.obj[item.en_name]"
            type="datetime"
            placeholder="选择日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="x"
            style="width: 100%"
          />

          <!-- 日期选择器 -->
          <el-date-picker
            v-else-if="item.ctype == '选择日期' || item.ctype == '添加日期'"
            v-model="formdata.obj[item.en_name]"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />

          <!-- 参数选择字段 -->
          <div v-else-if="item.ctype == '选择参数' || (item.zh_zdlist && Array.isArray(item.zh_zdlist) && item.zh_zdlist.length > 0)" class="param-select-field">
            <el-input
              :model-value="getDisplayValue(item)"
              readonly
              placeholder="点击选择"
              class="clickable-input"
              :class="{ 'textarea-input': item.zdtype == 'textarea' }"
              @click="xzDanCanShu(item, undefined, index)"
            />
          </div>

          <!-- 复杂字段（包含子字段的动态表单） -->
          <div v-else-if="item.addgzqx == 1" class="complex-field">
            <!-- 子项列表 -->
            <div v-for="(it, i) in formdata.obj[item.en_name]" :key="i" class="sub-item-group">
              <el-card class="sub-item-card" :header="item.cn_name + (i + 1)">
                <template #header>
                  <div class="card-header">
                    <span>{{ item.cn_name }}{{ i + 1 }}</span>
                    <el-button type="danger" size="small" @click="delmx(item.en_name, i)">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </div>
                </template>

                <!-- 子字段 -->
                <div v-for="(im, keys, inx) in it" :key="inx" class="sub-field">
                  <div v-if="item.fz_zdlist[inx].ctype" class="field-row">
                    <label class="field-label">{{ item.fz_zdlist[inx].cn_name }}</label>

                    <!-- 子字段的日期时间选择 -->
                    <el-date-picker
                      v-if="item.fz_zdlist[inx].ctype == '选择日期时间'"
                      v-model="it[item.fz_zdlist[inx].en_name]"
                      type="datetime"
                      placeholder="选择日期时间"
                      format="YYYY-MM-DD HH:mm:ss"
                      value-format="x"
                      style="width: 100%"
                    />

                    <!-- 子字段的日期选择 -->
                    <el-date-picker
                      v-else-if="item.fz_zdlist[inx].ctype == '选择日期' || item.fz_zdlist[inx].ctype == '添加日期'"
                      v-model="it[item.fz_zdlist[inx].en_name]"
                      type="date"
                      placeholder="选择日期"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      style="width: 100%"
                    />

                    <!-- 子字段的参数选择 -->
                    <el-input
                      v-else
                      :model-value="it[item.fz_zdlist[inx].en_name] || '点击选择参数'"
                      readonly
                      placeholder="点击选择参数"
                      class="clickable-input"
                      @click="xzDanCanShu(item, i, inx)"
                    />
                  </div>

                  <!-- 普通输入字段 -->
                  <div v-else class="field-row">
                    <label class="field-label">{{ item.fz_zdlist[inx].cn_name }}</label>
                    <el-input
                      v-model="it[item.fz_zdlist[inx].en_name]"
                      :type="item.fz_zdlist[inx].zdtype === 'number' ? 'number' : 'text'"
                      placeholder="请输入"
                    />
                  </div>
                </div>
              </el-card>
            </div>

            <!-- 添加明细按钮 -->
            <el-button type="primary" style="width: 100%; margin-top: 16px" @click="addgz(item)">
              + 添加明细
            </el-button>
          </div>

          <!-- 普通输入字段 -->
          <div v-else class="normal-field">
            <el-input
              v-if="item.zdtype == 'number'"
              v-model.number="formdata.obj[item.en_name]"
              type="number"
              :disabled="item.zhidu > 0"
              placeholder="请输入"
            />
            <el-input
              v-else
              v-model="formdata.obj[item.en_name]"
              :type="item.zdtype === 'textarea' ? 'textarea' : 'text'"
              :disabled="item.zhidu > 0 && item.ctype !== '选择参数_可手动填写'"
              :rows="item.zdtype === 'textarea' ? 4 : undefined"
              placeholder="请输入"
            />
          </div>

          <!-- 操作按钮区域 -->
          <div class="field-actions">
            <!-- 可手动填写选择按钮 -->
            <el-button
              v-if="item.ctype == '选择参数_可手动填写'"
              type="primary"
              size="small"
              @click.stop="xzDanCanShu(item)"
            >
              选择{{ item.cn_name }}
            </el-button>

            <!-- 上传按钮 -->
            <el-button
              v-if="['上传营业执照', '上传身份证正面', '上传身份证反面'].includes(item.ctype)"
              type="primary"
              @click.stop="chooseImage(item)"
            >
              {{ item.ctype }}
            </el-button>

            <!-- 上传选择双按钮 -->
            <div
              v-if="item.ctype == '上传选择营业执照'"
              class="double-button-group"
            >
              <el-button size="small" type="primary" @click.stop="chooseImage(item)">
                上传营业执照
              </el-button>
              <el-button size="small" type="primary" @click.stop="xzDanCanShu(item)">
                选择营业执照
              </el-button>
            </div>

            <div
              v-if="item.ctype == '上传选择身份证正面'"
              class="double-button-group"
            >
              <el-button size="small" type="primary" @click.stop="chooseImage(item)">
                上传身份证正面
              </el-button>
              <el-button size="small" type="primary" @click.stop="xzDanCanShu(item)">
                选择身份证正面
              </el-button>
            </div>

            <div
              v-if="item.ctype == '上传选择身份证反面'"
              class="double-button-group"
            >
              <el-button size="small" type="primary" @click.stop="chooseImage(item)">
                上传身份证反面
              </el-button>
              <el-button size="small" type="primary" @click.stop="xzDanCanShu(item)">
                选择身份证反面
              </el-button>
            </div>

            <!-- 双按钮选择数据 -->
            <div
              v-if="item.ctype == '双按钮选择数据'"
              class="double-button-group"
            >
              <el-button size="small" type="primary" @click.stop="xzDanCanShu(item, index, item.wtype)">
                选择库存设备
              </el-button>
              <el-button size="small" type="primary" @click.stop="xzDanCanShu(item, index, item.wtype_2)">
                选择库存设备替换
              </el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <!-- 测试打印数据 调试测试按钮区域 测试打印数据 -->
      <div class="debug-buttons" style="margin: 20px 0; padding: 15px; background: #f5f5f5; border-radius: 8px;">
        <h4>🔧 调试工具</h4>
        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
          <el-button type="warning" size="small" @click="testSelectParam">测试参数选择</el-button>
          <el-button type="info" size="small" @click="debugFormData">查看表单数据</el-button>
          <el-button type="success" size="small" @click="debugSelectDialog">测试弹窗</el-button>
          <el-button type="danger" size="small" @click="testRelatedFields">测试关联字段</el-button>
          <el-button type="primary" size="small" @click="testSaveFlow">测试保存流程</el-button>
        </div>
      </div>

      <!-- 图片上传组件 -->
      <UploadImg
        v-if="formdata.imgs || formdata.obj"
        :imgs="formdata.imgs"
        :obj="formdata.obj"
        :img-url="formdata.img_url"
      />
    </div>

    <!-- 弹窗底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" icon="Back">返回</el-button>
        <el-button type="primary" @click="handleSave" :loading="saving" icon="Check">保存设备</el-button>
        <el-button type="success" @click="saveAndClose" :loading="saving" icon="CircleCheck">保存并关闭</el-button>
      </div>
    </template>

    <!-- 参数选择弹窗 -->
    <el-dialog
      :model-value="paramSelectVisible"
      @update:model-value="closePopup"
      title="请选择"
      width="70%"
      append-to-body
      @close="closePopup"
    >
      <div class="param-select-content">
        <!-- 搜索区域 -->
        <div class="search-area">
          <el-input
            v-model="key"
            placeholder="查询"
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="cxDanCanShu">查询</el-button>
        </div>

        <!-- 操作按钮 -->
        <div class="operation-buttons">
          <el-button v-if="dx == 1" type="primary" @click="toggleAll">全选</el-button>
          <el-button v-if="dx == 1" type="primary" @click="notarize">确认</el-button>
          <el-button type="warning" @click="empty">清空</el-button>
        </div>

        <!-- 列表区域 -->
        <div class="param-list">
          <div
            v-for="(item, index) in xzlist"
            :key="item.index"
            class="param-item"
            @click="selectItem(item, index)"
          >
            <!-- 多选模式 -->
            <div v-if="dx == 1" class="param-item-content">
              <el-checkbox v-model="item.check" :true-label="1" :false-label="0">
                {{ item.biaoti }}
              </el-checkbox>
              
              <!-- 其他选项的输入框 -->
              <div v-if="item.biaoti == '其他'" class="other-input">
                <el-input
                  v-model="item.qitazd"
                  :disabled="item.check != 1"
                  placeholder="请输入用途"
                  @click.stop
                />
              </div>

              <!-- 列表信息 -->
              <div class="param-info">
                <div v-for="(info, idx) in item.hlist" :key="idx" class="info-item">
                  {{ info }}
                </div>
              </div>
            </div>

            <!-- 单选模式 -->
            <div v-else class="param-item-content">
              <div class="param-title">
                {{ item.biaoti }}
                
                <!-- 其他选项的输入框 -->
                <div v-if="item.biaoti == '其他'" class="other-input">
                  <el-input
                    v-model="item.qitazd"
                    placeholder="请输入其他"
                    @click.stop
                  />
                  <el-button type="primary" size="small" @click="selectItem(item, index)">
                    确定
                  </el-button>
                </div>
              </div>

              <!-- 列表信息 -->
              <div class="param-info">
                <div v-for="(info, idx) in item.hlist" :key="idx" class="info-item">
                  {{ info }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 综合弹窗 -->
    <el-dialog
      :model-value="zhPopupVisible"
      @update:model-value="closeZhPopup"
      title="综合设置"
      width="60%"
      append-to-body
      @close="closeZhPopup"
    >
      <div class="zh-popup-content">
        <div class="popup-tips">{{ Zhlist.tishi }}</div>
        
        <el-form :model="Zhmoban" label-width="120px">
          <el-form-item 
            v-for="(field, index) in Zhlist.zh_zdlist" 
            :key="index"
            :label="field.cn_name"
            :required="field.bitian === 1"
          >
            <!-- 有选择列表的字段显示为选择器 -->
            <el-select 
              v-if="field.zhi_list && field.zhi_list.length > 0"
              v-model="Zhmoban[field.en_name]"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="option in field.zhi_list"
                :key="option"
                :label="option"
                :value="option"
              />
            </el-select>
            
            <!-- 普通输入字段 -->
            <el-input
              v-else
              v-model="Zhmoban[field.en_name]"
              :type="field.zdtype === 'number' ? 'number' : 'text'"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <el-button @click="closeZhPopup">取消</el-button>
        <el-button @click="clearFormValues">清空</el-button>
        <el-button type="primary" @click="validateAndSubmit">确定</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import UploadImg from '../../../components/ImageUpload.vue'
import axios from 'axios'
import base64 from '@/utils/base64.js'

// 测试打印数据 为设备弹窗创建独立的请求实例，避免与主页面请求冲突 测试打印数据
const deviceRequest = axios.create({
  baseURL: 'https://vue.haozskj.com',
  timeout: 15000,
  headers: {
    'Content-Type': 'text/plain; charset=utf-8'
  }
})

// 设备弹窗独立的响应拦截器
deviceRequest.interceptors.response.use(
  response => {
    // console.log('测试打印数据 设备弹窗响应拦截器 - 原始响应:', response)
    
    let res
    if (typeof response.data === 'string') {
      try {
        res = JSON.parse(response.data)
        // console.log('测试打印数据 设备弹窗解析后响应:', res)
      } catch (e) {
        // console.error('测试打印数据 设备弹窗响应解析失败:', e)
        return response.data
      }
    } else {
      res = response.data
    }
    
    return res
  },
  error => {
    console.log('测试打印数据 设备弹窗请求失败:', error)
    ElMessage.error('网络请求失败')
    return Promise.reject(error)
  }
)

export default {
  name: 'DeviceEditDialog',
  emits: ['update:visible', 'save-success'],
  components: {
    UploadImg
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 从编辑页面传递的参数
    editParams: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    // 测试打印数据 Vue3 响应式数据 测试打印数据
    const loading = ref(false)
    const saving = ref(false)
    const paramSelectVisible = ref(false)
    const zhPopupVisible = ref(false)
    const formRef = ref()
    
    const formdata = reactive({
      anlist: [],
      zdlist: [],
      obj: {},
      imgs: [],
      img_url: ''
    })
    
    const hidezdlist = ref([])
    const xzlist = ref([])
    const dx = ref(0)
    const key = ref('')
    const danCanShu = ref({})
    const Zhlist = reactive({})
    const Zhmoban = reactive({})
    
    // 参数存储
    const yy = ref('')
    const gn = ref('')
    const bb = ref('')
    const wtype = ref('')
    const id = ref('')
    const qx = ref('')
    const tablePas = ref('')
    const cun = ref('')
    const kk = ref({})
    const openid = ref('17530681976237697942') // 默认值

    // 测试打印数据 弹窗显示/隐藏控制 测试打印数据
    watch(() => props.visible, (newVal) => {
      if (newVal && props.editParams) {
        // console.log('测试打印数据 弹窗打开，接收参数：', props.editParams)
        initFromEditPage()
      }
    }, { immediate: true })

    // 测试打印数据 从编辑页面初始化参数 测试打印数据
    const initFromEditPage = () => {
      if (props.editParams) {
        // console.log('测试打印数据 初始化设备编辑参数：', props.editParams)
        
        // 根据UniApp格式设置参数
        id.value = props.editParams.id || 0
        
        // 测试打印数据 如果是编辑模式且有编辑数据，预填充表单 测试打印数据
        if (props.editParams.isEdit && props.editParams.editData) {
          // console.log('测试打印数据 编辑模式，预填充数据：', props.editParams.editData)
          // 设置id为编辑的设备id
          id.value = props.editParams.editData.id || 0
        }
        
        // 测试打印数据 如果是复制模式且有复制数据，记录复制数据 测试打印数据
        if (props.editParams.isCopy && props.editParams.editData) {
          // console.log('测试打印数据 复制模式，准备复制数据：', props.editParams.editData)
          // 复制模式下ID设为0（新增）
          id.value = 0
        }
        
        // 获取用户信息并加载表单数据
        const userInfo = JSON.parse(localStorage.getItem('qzgUser') || '{}')
        if (userInfo.openid) {
          openid.value = userInfo.openid
        }
        
        getFromData()
      }
    }

    // 测试打印数据 获取表单数据 测试打印数据
    const getFromData = async () => {
      loading.value = true
      
      try {
        // 测试打印数据 按照UniApp格式构建请求参数 测试打印数据
        const bs64_cs = {
          dtype: 'add',
          qiyebh: '',
          key: '',
          id: id.value,
          cxlx: props.editParams.cxlx || 101,
          img_is_zj: 0,
          openid: openid.value,
          liuchengbh: props.editParams.liuchengbh || ''
        }
        
        const requestParams = {
          canshu: {
            ctype: 'app_zlxt_xq_edit',
            bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
            bs64_obj: base64.encode(JSON.stringify(props.editParams.formObj || {})),
            bs64_list: '',
            ids: '',
            faid: props.editParams.faid || 0,
            zub_faid: props.editParams.zub_faid || 0
          }
        }
        
        // console.log('测试打印数据 获取设备表单数据，参数：', requestParams)
        // console.log('测试打印数据 解码后的cs：', bs64_cs)
        
        const response = await deviceRequest.post('/xcx/ajax/Ajax_apppost.ashx', requestParams)
        // console.log('测试打印数据 设备表单数据API返回：', response)
        
        if (response && (response.code === 1 || response.zdlist)) {
          Object.assign(formdata, response)
          // console.log('测试打印数据 设备表单数据加载成功：', formdata)
          
          // 初始化综合字段的默认值
          if (formdata.zdlist) {
            formdata.zdlist.forEach(item => {
              if (item.zh_zdlist && item.zh_zdlist.length > 0) {
                // 为综合字段设置默认的空对象
                if (!formdata.obj[item.en_name]) {
                  const zhObj = {}
                  item.zh_zdlist.forEach(zhField => {
                    zhObj[zhField.en_name] = ''
                  })
                  formdata.obj[item.en_name] = JSON.stringify(zhObj)
                }
              }
            })
          }
          
          // 测试打印数据 如果是编辑模式或复制模式，填充现有数据 测试打印数据
          if (props.editParams && props.editParams.isEdit && props.editParams.editData) {
            // console.log('测试打印数据 编辑模式，填充现有数据：', props.editParams.editData)
            Object.keys(props.editParams.editData).forEach(key => {
              if (formdata.obj.hasOwnProperty(key)) {
                formdata.obj[key] = props.editParams.editData[key]
              }
            })
            // console.log('测试打印数据 数据填充完成，当前表单数据：', formdata.obj)
          }
          
          // 测试打印数据 如果是复制模式，填充复制的数据 测试打印数据
          if (props.editParams && props.editParams.isCopy && props.editParams.editData) {
            // console.log('测试打印数据 复制模式，填充复制数据：', props.editParams.editData)
            Object.keys(props.editParams.editData).forEach(key => {
              if (formdata.obj.hasOwnProperty(key)) {
                // 复制数据但排除ID字段
                if (key !== 'id') {
                  formdata.obj[key] = props.editParams.editData[key]
                }
              }
            })
            // console.log('测试打印数据 复制数据填充完成，当前表单数据：', formdata.obj)
          }
        } else {
          ElMessage.error(response.msg || '获取表单数据失败')
        }
      } catch (error) {
        // console.error('测试打印数据 获取表单数据失败：', error)
        ElMessage.error('获取表单数据失败')
      } finally {
        loading.value = false
      }
    }

    // 测试打印数据 空值处理函数 测试打印数据
    const nullFun = (val) => {
      return val == null || val === '' || val === undefined ? '' : val
    }

    // 测试打印数据 添加明细（按UniApp逻辑优化）测试打印数据
    const addgz = (item) => {
      // console.log('测试打印数据 添加明细：', item.cn_name, item)
      
      // 创建新的明细对象
      const obj = {}
      
      // 根据fz_zdlist（子字段列表）初始化空对象
      if (item.fz_zdlist && Array.isArray(item.fz_zdlist)) {
        for (let i = 0; i < item.fz_zdlist.length; i++) {
          obj[item.fz_zdlist[i].en_name] = ''
        }
      } else if (item.moban) {
        // 如果有模板，使用模板（对应UniApp的zhuanjson(item.moban)）
        Object.assign(obj, JSON.parse(JSON.stringify(item.moban)))
      }
      
      // 确保目标字段是数组
      if (!Array.isArray(formdata.obj[item.en_name])) {
        formdata.obj[item.en_name] = []
      }
      
      formdata.obj[item.en_name].push(obj)
      // console.log('测试打印数据 添加明细成功，当前列表：', formdata.obj[item.en_name])
    }

    // 测试打印数据 删除明细 测试打印数据
    const delmx = (name, i) => {
      formdata.obj[name].splice(i, 1)
    }

    // 测试打印数据 选择参数主入口 测试打印数据
    const xzCanShu = (item, inx, index) => {
      // console.log('测试打印数据 点击选择参数：', item.cn_name, item)
      
      // 不可编辑字段不触发选择
      if (item.edit == 0 || (item.zhidu > 0 && item.ctype !== '选择参数_可手动填写')) {
        return
      }
      
      // 当该字段有选择参数功能时（修复zh_zdlist检查逻辑）
      if (item.ctype == '选择参数' || (item.zh_zdlist && Array.isArray(item.zh_zdlist) && item.zh_zdlist.length > 0)) {
        xzDanCanShu(item, undefined, index)
      }
    }

    // 测试打印数据 选择单个参数 测试打印数据
    const xzDanCanShu = async (canShu, numb, yb, type) => {
      // console.log('测试打印数据 xzDanCanShu 被调用！参数：', {
      //   canShu: canShu,
      //   numb: numb,
      //   yb: yb,
      //   type: type,
      //   ctype: canShu?.ctype,
      //   wtype: canShu?.wtype,
      //   zh_zdlist: canShu?.zh_zdlist
      // })
      
      danCanShu.value = canShu
      danCanShu.value.yb = yb
      danCanShu.value.numb = numb
      dx.value = danCanShu.value.dx || 0  // 默认单选模式
      wtype.value = type ? type : danCanShu.value.wtype
      
      // 测试打印数据 保存接口公式到danCanShu中，用于后续字段映射 测试打印数据
      if (canShu.jkgongshi && Array.isArray(canShu.jkgongshi)) {
        danCanShu.value.jkgongshi = canShu.jkgongshi
        // console.log('测试打印数据 保存接口公式：', danCanShu.value.jkgongshi)
      }
      
      // console.log('测试打印数据 点击选择：', danCanShu.value.cn_name, '工作类型:', wtype.value)
      
      // 如果有综合字段，打开综合弹窗
      if (danCanShu.value.zh_zdlist && Array.isArray(danCanShu.value.zh_zdlist) && danCanShu.value.zh_zdlist.length > 0) {
        // console.log('测试打印数据 打开综合弹窗')
        Object.assign(Zhlist, danCanShu.value)
        Object.keys(Zhmoban).forEach(key => delete Zhmoban[key])
        
        // 测试打印数据 初始化综合参数，按照UniApp逻辑 测试打印数据
        danCanShu.value.zh_zdlist.forEach(field => {
          if (field.zhi_list && field.zhi_list.length > 0) {
            // 有选择列表的字段，默认选择第一个选项（按照UniApp逻辑）
            Zhmoban[field.en_name] = field.zhi_list[0]
          } else {
            // 其他字段设置为空
            Zhmoban[field.en_name] = ''
          }
        })
        
        // 如果已有值，尝试解析并填充
        const existingValue = formdata.obj[danCanShu.value.en_name]
        if (existingValue && existingValue !== '') {
          try {
            const parsedValue = JSON.parse(existingValue)
            Object.keys(parsedValue).forEach(key => {
              if (parsedValue[key] !== '') {
                Zhmoban[key] = parsedValue[key]
              }
            })
            // 确保有选择列表的字段仍然保持正确值
            danCanShu.value.zh_zdlist.forEach(field => {
              if (field.zhi_list && field.zhi_list.length > 0) {
                // 如果已有值且在选择列表中，保持原值；否则设置为第一个选项
                if (!parsedValue[field.en_name] || !field.zhi_list.includes(parsedValue[field.en_name])) {
                  Zhmoban[field.en_name] = field.zhi_list[0]
                }
              }
            })
          } catch (error) {
            // console.error('测试打印数据 解析已有综合参数值失败:', error)
          }
        }
        
        zhPopupVisible.value = true
        return
      }
      
      // 测试打印数据 检查是否有参数选择功能 测试打印数据
      if (!danCanShu.value.wtype || danCanShu.value.zhidu <= 0) {
        // console.log('测试打印数据 字段不支持参数选择')
        return
      }
      
      try {
        // 测试打印数据 按照UniApp格式构建参数选择请求 测试打印数据
        const bs64_cs = {
          wtype: wtype.value || danCanShu.value.wtype,
          pagenumber: 0,
          cxlx: props.editParams.cxlx || 101,
          key: key.value || '',
          openid: openid.value,
          jk_zdm: props.editParams.zib_ziduan || '',
          jk_zdz: props.editParams.pingtaibh || ''
        }
        
        const requestParams = {
          canshu: {
            ctype: 'app_xuanze_canshu',
            bs64_cs: base64.encode(JSON.stringify(bs64_cs)),
            bs64_obj: base64.encode(JSON.stringify(formdata.obj)),
            bs64_obj_zhub: base64.encode(JSON.stringify(props.editParams.formObj || {})),
            bs64_list: '',
            ids: '',
            faid: props.editParams.faid || 0,
            zub_faid: props.editParams.zub_faid || 0
          }
        }
        
        // console.log('测试打印数据 获取参数选择列表，参数：', requestParams)
        // console.log('测试打印数据 解码后的cs：', bs64_cs)
        
        const response = await deviceRequest.post('/xcx/ajax/Ajax_apppost.ashx', requestParams)
        // console.log('测试打印数据 参数选择API返回：', response)
        
        if (response && response.shuzu) {
          xzlist.value = response.shuzu.map(item => ({ ...item, check: 0 }))
          paramSelectVisible.value = true
        } else {
          ElMessage.error(response.msg || '获取参数列表失败')
        }
      } catch (error) {
        console.log('测试打印数据 获取参数列表失败：', error)
        ElMessage.log('获取参数列表失败')
      }
    }

    // 测试打印数据 查询参数 测试打印数据
    const cxDanCanShu = () => {
      // console.log('测试打印数据 查询参数：', key.value)
      xzDanCanShu(danCanShu.value)
    }

    // 测试打印数据 选择项目 测试打印数据
    const selectItem = (item, index) => {
      // console.log('测试打印数据 selectItem 被调用，选择的项目：', item)
      
      if (dx.value == 1) {
        // 多选模式
        item.check = item.check == 1 ? 0 : 1
      } else {
        // 单选模式
        let jg = item.biaoti
        if (item.qitazd && item.biaoti == '其他') {
          jg = item.qitazd
        }
        danCanShu.value.jg = jg
        
        // 测试打印数据 根据UniApp逻辑处理接口公式映射 测试打印数据
        if (item.obj && danCanShu.value.jkgongshi && Array.isArray(danCanShu.value.jkgongshi)) {
          // console.log('测试打印数据 处理接口公式映射，选择项数据：', item.obj)
          // console.log('测试打印数据 接口公式列表：', danCanShu.value.jkgongshi)
          
          const selectedData = item.obj
          danCanShu.value.jkgongshi.forEach(gongshi => {
            // gongshi.zbzd: 源字段名（从选择项数据中获取）
            // gongshi.fbzd: 目标字段名（要设置到表单中的字段）
            if (gongshi.zbzd && gongshi.fbzd && selectedData[gongshi.zbzd] !== undefined) {
              if (jg == "其他") {
                // 如果选择的是"其他"，使用用户输入的内容
                formdata.obj[gongshi.fbzd] = item.qitazd || ''
              } else {
                // 否则使用选择项的对应字段值
                formdata.obj[gongshi.fbzd] = selectedData[gongshi.zbzd]
              }
              console.log(`测试打印数据 接口公式映射：${gongshi.fbzd} <- ${gongshi.zbzd} = ${formdata.obj[gongshi.fbzd]}`)
            }
          })
        }
        
        changeDanCanShu(danCanShu.value)
        closePopup()
      }
    }

    // 测试打印数据 全选切换 测试打印数据
    const toggleAll = () => {
      const allChecked = xzlist.value.every(item => item.check == 1)
      xzlist.value.forEach(item => {
        item.check = allChecked ? 0 : 1
      })
    }

    // 测试打印数据 确认多选 测试打印数据
    const notarize = () => {
      const selectedItems = xzlist.value.filter(item => item.check == 1)
      
      // 测试打印数据 按照UniApp逻辑处理多选结果 测试打印数据
      if (selectedItems.length > 0 && danCanShu.value.jkgongshi && Array.isArray(danCanShu.value.jkgongshi)) {
        // console.log('测试打印数据 多选确认，选中项目：', selectedItems)
        // console.log('测试打印数据 接口公式：', danCanShu.value.jkgongshi)
        
        // 创建kongobj来收集多选结果
        const kongobj = {}
        
        // 初始化kongobj的所有字段为空字符串
        danCanShu.value.jkgongshi.forEach(gongshi => {
          if (gongshi.zbzd) {
            kongobj[gongshi.zbzd] = ''
          }
        })
        kongobj.ids = '' // 添加ids字段收集选中项的id
        
        // 遍历选中项，收集数据
        selectedItems.forEach(item => {
          Object.keys(kongobj).forEach(key => {
            if (key === 'ids') {
              if (kongobj.ids === '') {
                kongobj.ids = item.obj.id
              } else {
                kongobj.ids += ',' + item.obj.id
              }
            } else {
              let value = ''
              if (item.biaoti === '其他' && item.qitazd) {
                value = item.qitazd
              } else if (item.obj[key]) {
                value = item.obj[key]
              }
              
              if (kongobj[key] === '') {
                kongobj[key] = value
              } else if (value) {
                kongobj[key] += ',' + value
              }
            }
          })
        })
        
        // console.log('测试打印数据 多选收集的数据：', kongobj)
        
        // 应用接口公式映射
        danCanShu.value.jkgongshi.forEach(gongshi => {
          if (gongshi.zbzd && gongshi.fbzd && kongobj[gongshi.zbzd] !== undefined) {
            formdata.obj[gongshi.fbzd] = kongobj[gongshi.zbzd]
            // console.log(`测试打印数据 多选映射：${gongshi.fbzd} <- ${gongshi.zbzd} = ${kongobj[gongshi.zbzd]}`)
          }
        })
      } else {
        // 简单的多选处理
        const jg = selectedItems.map(item => {
          if (item.qitazd && item.biaoti == '其他') {
            return item.qitazd
          }
          return item.biaoti
        }).join(',')
        
        danCanShu.value.jg = jg
        changeDanCanShu(danCanShu.value)
      }
      
      closePopup()
    }

    // 测试打印数据 清空选择 测试打印数据
    const empty = () => {
      // console.log('测试打印数据 清空选择')
      
      // 测试打印数据 按照UniApp逻辑处理清空操作 测试打印数据
      if (danCanShu.value.jkgongshi && Array.isArray(danCanShu.value.jkgongshi)) {
        // 如果有接口公式，使用kongobj的逻辑清空
        const kongobj = {}
        
        // 从接口公式中获取要清空的字段
        danCanShu.value.jkgongshi.forEach(gongshi => {
          if (gongshi.zbzd) {
            kongobj[gongshi.zbzd] = '' // 设置为空字符串
          }
        })
        
        // console.log('测试打印数据 清空数据对象：', kongobj)
        
        // 应用接口公式映射，将字段清空
        danCanShu.value.jkgongshi.forEach(gongshi => {
          if (gongshi.zbzd && gongshi.fbzd && kongobj[gongshi.zbzd] !== undefined) {
            formdata.obj[gongshi.fbzd] = kongobj[gongshi.zbzd]
            // console.log(`测试打印数据 清空字段：${gongshi.fbzd} = ${kongobj[gongshi.zbzd]}`)
          }
        })
      } else {
        // 简单清空逻辑
        if (danCanShu.value.en_name) {
          formdata.obj[danCanShu.value.en_name] = ''
        }
      }
      
      // 清空所有选中状态
      xzlist.value.forEach(item => {
        item.check = 0
      })
      
      closePopup()
    }

    // 测试打印数据 关闭参数选择弹窗 测试打印数据
    // 参数选择弹窗关闭
    const closePopup = (val = false) => {
      paramSelectVisible.value = !!val
    }

    // 测试打印数据 修改参数值 测试打印数据
    const changeDanCanShu = (item) => {
      // console.log('测试打印数据 修改参数值，字段：', item.en_name, '新值：', item.jg)
      
      // 对于子字段修改（复杂字段的子项）
      if (item.numb !== undefined && item.yb !== undefined) {
        if (formdata.zdlist[item.yb] && formdata.zdlist[item.yb].fz_zdlist && formdata.zdlist[item.yb].fz_zdlist[item.inx]) {
          formdata.obj[item.en_name][item.numb][formdata.zdlist[item.yb].fz_zdlist[item.inx].en_name] = item.jg
        }
      } else {
        // 对于主字段修改
        formdata.obj[item.en_name] = item.jg
        
        // 测试打印数据 特殊处理：当修改设备名称时，自动关联其他字段 测试打印数据
        if (item.en_name && (item.en_name.includes('shebei') || item.cn_name?.includes('设备名称'))) {
          // console.log('测试打印数据 检测到设备名称字段修改，寻找关联的选择项数据')
          
          // 从当前选择列表中找到对应的项目
          const selectedItem = xzlist.value.find(listItem => listItem.biaoti === item.jg)
          if (selectedItem && selectedItem.obj) {
            // console.log('测试打印数据 找到选择项的完整数据：', selectedItem.obj)
            
            // 自动填充平台高度
            if (selectedItem.obj.pingtaigd) {
              const heightFields = ['pingtaigd', 'pingtai_gaodu', 'gaodu', 'height']
              for (let fieldName of heightFields) {
                if (formdata.obj.hasOwnProperty(fieldName)) {
                  // console.log(`测试打印数据 自动填充平台高度字段 ${fieldName}:`, selectedItem.obj.pingtaigd)
                  formdata.obj[fieldName] = selectedItem.obj.pingtaigd
                  break
                }
              }
            }
            
            // 自动填充其他相关字段
            Object.keys(selectedItem.obj).forEach(key => {
              if (key !== 'id' && key !== 'biaoti' && selectedItem.obj[key] && formdata.obj.hasOwnProperty(key)) {
                // console.log(`测试打印数据 自动填充关联字段 ${key}:`, selectedItem.obj[key])
                formdata.obj[key] = selectedItem.obj[key]
              }
            })
          }
        }
        
        // 测试打印数据 处理接口公式映射（类似UniApp的jkgongshi逻辑）测试打印数据
        if (item.jkgongshi && Array.isArray(item.jkgongshi)) {
          item.jkgongshi.forEach(gongshi => {
            if (gongshi.fbzd && gongshi.zbzd) {
              // 这里可以根据接口公式设置其他字段的值
              // 暂时先输出日志，实际逻辑需要根据具体需求调整
              // console.log('测试打印数据 接口公式映射：', gongshi.fbzd, '<-', gongshi.zbzd)
            }
          })
        }
      }
      
      // 根据字段值控制其他字段显示隐藏
      yincangZd(item)
    }

    // 测试打印数据 字段显示隐藏逻辑（按UniApp逻辑优化）测试打印数据
    const yincangZd = (item) => {
      // console.log('测试打印数据 处理字段显示隐藏逻辑')
      
      // 清空当前隐藏字段列表
      hidezdlist.value = []
      
      // 遍历所有字段的显示隐藏逻辑
      for (let zditem of formdata.zdlist) {
        // 检查hide_zdlist隐藏字段逻辑
        if (zditem.hide_zdlist && Array.isArray(zditem.hide_zdlist) && zditem.hide_zdlist.length > 0) {
          const currentValue = formdata.obj[zditem.en_name]
          if (currentValue && currentValue.length > 0) {
            const hideItem = zditem.hide_zdlist.find(hideRule => hideRule.value == currentValue)
            if (hideItem && hideItem.hide_zdlist) {
              hidezdlist.value = hidezdlist.value.concat(hideItem.hide_zdlist)
              // console.log('测试打印数据 根据hide_zdlist隐藏字段：', hideItem.hide_zdlist)
            }
          }
        }
        
        // 检查yc_zdlist隐藏字段逻辑（原有逻辑保留）
        if (zditem.yc_zdlist && zditem.yc_zdlist.length > 0) {
          for (let ycitem of zditem.yc_zdlist) {
            // 检查当前字段值是否触发隐藏条件
            if (formdata.obj[ycitem.pd_zdname] && 
                formdata.obj[ycitem.pd_zdname].includes(ycitem.pd_zdzhi)) {
              // 添加到隐藏列表
              if (!hidezdlist.value.includes(zditem.en_name)) {
                hidezdlist.value.push(zditem.en_name)
              }
              // console.log('测试打印数据 根据yc_zdlist隐藏字段：', zditem.en_name, '触发条件：', ycitem.pd_zdname, '=', ycitem.pd_zdzhi)
            }
          }
        }
      }
      
      // console.log('测试打印数据 当前隐藏字段列表：', hidezdlist.value)
    }

    // 测试打印数据 选择图片 测试打印数据
    const chooseImage = (item) => {
      // console.log('测试打印数据 选择图片：', item.cn_name)
      ElMessage.info('图片上传功能待实现')
    }

    // 测试打印数据 综合弹窗相关 测试打印数据
    const clearFormValues = () => {
      // 清空综合参数模板
      Object.keys(Zhmoban).forEach(key => {
        Zhmoban[key] = ''
      })
      
      // 清空对应字段的值
      if (danCanShu.value && danCanShu.value.en_name) {
        formdata.obj[danCanShu.value.en_name] = ''
      }
      
      // 关闭弹窗
      closeZhPopup()
      
      ElMessage.success('清空成功')
    }

    const validateAndSubmit = () => {
      // 验证必填字段
      for (let field of Zhlist.zh_zdlist) {
        if (field.bitian == 1 && !Zhmoban[field.en_name]) {
          ElMessage.warning(`请输入${field.cn_name}`)
          return
        }
      }
      
      // 测试打印数据 按照UniApp逻辑处理保存 测试打印数据
      const obj = Object.assign({}, Zhmoban)
      const strs = JSON.stringify(obj)
      danCanShu.value.jg = strs
      changeDanCanShu(danCanShu.value)
      closeZhPopup()
    }

    // 综合弹窗关闭
    const closeZhPopup = (val = false) => {
      zhPopupVisible.value = !!val
    }

    // 测试打印数据 保存数据 - 模拟UniApp逻辑，不直接保存到后台，而是传递给父页面 测试打印数据
    const handleSave = async () => {
      console.log('测试打印数据 开始处理设备数据传递')
      
      // 验证必填字段
      for (let item of formdata.zdlist) {
        if (item.bitian == 1 && !hidezdlist.value.includes(item.en_name)) {
          if (!formdata.obj[item.en_name] || formdata.obj[item.en_name] === '') {
            ElMessage.warning(`请填写${item.cn_name}`)
            return
          }
        }
      }
      
      saving.value = true
      
      try {
        // 测试打印数据 模拟UniApp的数据处理逻辑 测试打印数据
        const processedData = JSON.parse(JSON.stringify(formdata.obj))
        
        // 处理字段验证和数据转换（模拟uni-app中的zdlist循环处理）
        for (let item of formdata.zdlist) {
          if (item.bitian == 1 && !processedData[item.en_name]) {
            ElMessage.warning(`请填写${item.cn_name}`)
            saving.value = false
            return
          }
        }
        
        console.log('测试打印数据 处理后的设备数据：', processedData)
        
        // 测试打印数据 模拟UniApp的hzstools.objUrl_ZhuanMa转换 测试打印数据
        const transferData = {
          ...processedData,
          // 确保关键字段存在
          id: processedData.id || 0,
          faid: props.editParams.faid || 0
        }
        
        ElMessage.success('设备信息已更新')
        
        // 测试打印数据 按照UniApp逻辑传递数据给父页面（模拟prevPage.xzSheBeiSet） 测试打印数据
        emit('save-success', {
          data: transferData,
          index: props.editParams.index !== undefined ? props.editParams.index : null,
          isEdit: props.editParams.isEdit || false
        })
        
        console.log('测试打印数据 数据已传递给父页面，关闭弹窗')
        handleClose()
        
      } catch (error) {
        console.error('测试打印数据 处理设备数据失败：', error)
        ElMessage.error('处理失败: ' + (error.message || '数据处理错误'))
      } finally {
        saving.value = false
      }
    }

    // 测试打印数据 保存并关闭 测试打印数据
    const saveAndClose = async () => {
      await handleSave()
      // handleSave中已经包含了关闭逻辑，这里不需要额外处理
    }

    // 测试打印数据 关闭弹窗 测试打印数据
    const handleClose = () => {
      emit('update:visible', false)
    }

    // 测试打印数据 处理弹窗显示状态更新 测试打印数据
    const handleUpdateVisible = (newValue) => {
      emit('update:visible', newValue)
    }

    // 测试打印数据 调试测试方法 测试打印数据
    const testSelectParam = () => {
      // console.log('测试打印数据 测试参数选择功能')
      if (formdata.zdlist && formdata.zdlist.length > 0) {
        const paramField = formdata.zdlist.find(item => item.ctype === '选择参数' || (item.zh_zdlist && item.zh_zdlist.length > 0))
        if (paramField) {
          console.log('测试打印数据 找到参数字段：', paramField)
          xzDanCanShu(paramField)
        } else {
          // console.log('测试打印数据 未找到参数选择字段')
        }
      }
    }

    const debugFormData = () => {
      // console.log('测试打印数据 当前表单数据：', {
      //   formdata: formdata,
      //   editParams: props.editParams,
      //   openid: openid.value,
      //   id: id.value
      // })
    }

    const debugSelectDialog = () => {
      // console.log('测试打印数据 测试弹窗显示')
      paramSelectVisible.value = true
      xzlist.value = [
        { 
          biaoti: '电动14米剪叉式', 
          check: 0,
          obj: {
            id: 4,
            shebeimc: "电动14米剪叉式",
            shebeilx: "剪叉式",
            pingtaigd: "14米",
            shebeizx: "剪叉式",
            shebeilx: "剪叉式",
            tianmubj: "200",
            yuemubj: "2000",
            qitazd: ""
          }
        },
        { 
          biaoti: '电动8米剪叉式', 
          check: 0,
          obj: {
            id: 5,
            shebeimc: "电动8米剪叉式",
            pingtaigd: "8米",
            tianmubj: "150",
            yuemubj: "1500"
          }
        }
      ]
    }

    const testRelatedFields = () => {
      // console.log('测试打印数据 测试关联字段填充功能')
      
      // 模拟选择"电动14米剪叉式"设备
      const mockSelectedItem = {
        biaoti: '电动14米剪叉式',
        obj: {
          id: 4,
          shebeimc: "电动14米剪叉式",
          shebeilx: "剪叉式",
          pingtaigd: "14米",
          tianmubj: "200",
          yuemubj: "2000"
        }
      }
      
      // 模拟设备名称字段
      const mockDeviceField = {
        en_name: 'shebeimc',
        cn_name: '设备名称',
        jg: '电动14米剪叉式',
        jkgongshi: [
          { zbzd: 'pingtaigd', fbzd: 'pingtaigd' },
          { zbzd: 'shebeimc', fbzd: 'shebeimc' },
          { zbzd: 'tianmubj', fbzd: 'tianmubj' },
          { zbzd: 'yuemubj', fbzd: 'yuemubj' }
        ]
      }
      
      // 设置模拟数据到选择列表
      xzlist.value = [mockSelectedItem]
      danCanShu.value = mockDeviceField
      
      // 调用选择项目方法
      selectItem(mockSelectedItem, 0)
      
      // console.log('测试打印数据 测试完成，检查表单数据：', formdata.obj)
    }

    // 测试打印数据 获取字段显示值 测试打印数据
    const getDisplayValue = (item) => {
      const value = formdata.obj[item.en_name]
      
      // 如果没有值，显示"点击选择"
      if (!value || value === '') {
        return '点击选择'
      }
      
      // 如果是综合参数（有zh_zdlist），解析JSON并友好显示
      if (item.zh_zdlist && Array.isArray(item.zh_zdlist) && item.zh_zdlist.length > 0) {
        try {
          const parsedValue = JSON.parse(value)
          const displayParts = []
          
          // 遍历综合字段配置，按顺序显示
          item.zh_zdlist.forEach(field => {
            const fieldValue = parsedValue[field.en_name]
            if (fieldValue && fieldValue !== '') {
              displayParts.push(`${field.cn_name}：${fieldValue}`)
            }
          })
          
          return displayParts.length > 0 ? displayParts.join('，') : '点击选择'
        } catch (error) {
          // console.error('测试打印数据 解析综合参数显示值失败:', error)
          return value
        }
      }
      
      // 普通参数直接返回值
      return value
    }

    const testSaveFlow = () => {
      // console.log('测试打印数据 测试保存流程')
      
      // 模拟表单数据
      formdata.obj = {
        shebeimc: '电动14米剪叉式',
        pingtaigd: '14米',
        tianmubj: '200',
        yuemubj: '2000'
      }
      
      // console.log('测试打印数据 模拟保存数据：', formdata.obj)
      
      // 直接触发保存成功事件测试
      const savedData = {
        ...formdata.obj,
        id: 123 // 模拟返回的ID
      }
      
      emit('save-success', {
        data: savedData,
        index: props.editParams.index || null,
        isNew: !props.editParams.id || props.editParams.id === 0
      })
      
      ElMessage.success('测试保存流程完成')
    }

    return {
      // 响应式数据
      loading,
      saving,
      paramSelectVisible,
      zhPopupVisible,
      formRef,
      formdata,
      hidezdlist,
      xzlist,
      dx,
      key,
      danCanShu,
      Zhlist,
      Zhmoban,
      
      // 方法
      nullFun,
      addgz,
      delmx,
      xzCanShu,
      xzDanCanShu,
      cxDanCanShu,
      selectItem,
      toggleAll,
      notarize,
      empty,
      closePopup,
      changeDanCanShu,
      yincangZd,
      chooseImage,
      clearFormValues,
      validateAndSubmit,
      closeZhPopup,
      handleSave,
      saveAndClose,
      handleClose,
      handleUpdateVisible,
      getDisplayValue,
      
      // 调试方法
      testSelectParam,
      debugFormData,
      debugSelectDialog,
      testRelatedFields,
      testSaveFlow
    }
  }
}
</script>

<style scoped>
/* 测试打印数据 Vue3 弹窗组件样式 测试打印数据 */

.device-edit-dialog {
  max-height: 80vh;
  overflow-y: auto;
}

.device-form-container {
  max-height: 70vh;
  overflow-y: auto;
}

.loading-wrapper {
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.device-form {
  padding: 20px;
}

.readonly-field {
  color: #666;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  min-height: 36px;
  line-height: 20px;
  border: 1px solid #e4e7ed;
  position: relative;
}

.readonly-field::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
}

.param-select-field .clickable-input {
  cursor: pointer;
  transition: all 0.3s ease;
}

.param-select-field .clickable-input:hover {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.param-select-field .clickable-input .el-input__inner {
  cursor: pointer;
  background-color: #f9f9f9;
  position: relative;
}

.param-select-field .clickable-input .el-input__inner::after {
  content: '📋';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}

.param-select-field .textarea-input {
  min-height: 100px;
}

.param-select-field .textarea-input .el-input__inner {
  min-height: 100px;
  resize: vertical;
}

.complex-field .sub-item-group {
  margin-bottom: 16px;
}

.complex-field .sub-item-card {
  margin-bottom: 16px;
}

.complex-field .sub-item-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.complex-field .sub-item-card .el-card__header {
  padding: 12px 16px;
  background-color: #f8f9fa;
}

.complex-field .sub-field {
  margin-bottom: 12px;
}

.complex-field .field-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.complex-field .field-label {
  min-width: 100px;
  margin-right: 12px;
  font-size: 14px;
  color: #606266;
}

.normal-field {
  width: 100%;
}

.field-actions {
  margin-top: 12px;
}

.field-actions .double-button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.field-actions .double-button-group .el-button {
  flex: 1;
  min-width: 120px;
}

.field-actions .el-button + .el-button {
  margin-left: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

.dialog-footer .el-button {
  min-width: 100px;
  padding: 12px 20px;
  font-size: 14px;
}

.dialog-footer .el-button:first-child {
  margin-left: 0;
}

.dialog-footer .el-button + .el-button {
  margin-left: 12px;
}

/* 参数选择弹窗样式 */
.param-select-content {
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-area {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-area .search-input {
  flex: 1;
}

.search-area .el-button {
  white-space: nowrap;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.operation-buttons .el-button {
  min-width: 80px;
}

.param-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.param-item {
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.param-item:hover {
  background-color: #f5f7fa;
}

.param-item:last-child {
  border-bottom: none;
}

.param-item .el-checkbox {
  width: 100%;
}

.param-item .el-checkbox__label {
  width: 100%;
  font-weight: normal;
}

.param-item-content .param-title {
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.param-item-content .other-input {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.param-item-content .other-input .el-input {
  flex: 1;
}

.param-item-content .param-info .info-item {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

/* 综合弹窗样式 */
.zh-popup-content .popup-tips {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.zh-popup-content .el-form-item {
  margin-bottom: 16px;
}

/* 表单项间距优化 */
.device-form .el-form-item {
  margin-bottom: 20px;
}

/* 滚动条样式 */
.param-list::-webkit-scrollbar,
.device-form-container::-webkit-scrollbar {
  width: 6px;
}

.param-list::-webkit-scrollbar-track,
.device-form-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.param-list::-webkit-scrollbar-thumb,
.device-form-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.param-list::-webkit-scrollbar-thumb:hover,
.device-form-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .device-form-container {
    padding: 12px;
  }
  
  .field-actions .double-button-group {
    flex-direction: column;
  }
  
  .field-actions .double-button-group .el-button {
    width: 100%;
  }
  
  .search-area {
    flex-direction: column;
  }
  
  .search-area .search-input {
    margin-bottom: 8px;
  }
  
  .operation-buttons {
    flex-direction: column;
  }
}
</style>